<template>
 <el-container class="login-one">
   <el-header></el-header>
   <el-main>
     <br> <br> <br> <br> <br> <br>
        <el-row>
            <el-col :span="8">&nbsp;</el-col>
            <el-col :span="8"  style="background-color: white;border-radius: 5px;">
            <br>
                              <h1 align="center">用户登录</h1>
                               <br>
                              <el-form :model="userInfo" label-width="100px">
                                    <el-form-item label="用户:">
                                      <el-col :span="20">
                                         <el-input v-model="userInfo.userName" ></el-input>
                                      </el-col>

                                    </el-form-item>
                                    <el-form-item label="密码:">
                                      <el-col :span="20">
                                        <el-input v-model="userInfo.userPwd" show-password></el-input>
                                       </el-col>
                                    </el-form-item>

                                    <el-form-item>
                                      <input type="checkbox" v-model="ck" @click="remerber"/><span>记住密码</span>
                                    </el-form-item>

                                    <el-form-item >
                                          <el-button type="success" icon="el-icon-user-solid" size="mini" @click="login">登录</el-button>
                                          <el-button type="success" icon="el-icon-user-solid" size="mini">考生注册</el-button>
                                    </el-form-item>
                              </el-form>


              </el-col>
            <el-col :span="8">&nbsp;</el-col>
        </el-row>
   </el-main>
 </el-container>
</template>

<script>

  export default {
    name:"hello",
    data(){

      return{
        ck:false,//用来判断checkbox是否选中
           userInfo:{
                userName:"",
                userPwd:""
           }
      }
    },
    methods:{
      login(){
        //把用户名存储在localStorage,不会随着会话消失而消失
        localStorage.setItem("userName",this.userInfo.userName)
        //把用户名存储在sessionStorage，会随着会话消失而消失，安全性较高
        // sessionStorage.setItem("userName",this.userInfo.userName)
        this.$router.replace("/index");

      },
      remerber(){//记住用户名和密码
      //判断是否选中
        if(this.ck==true){
          //清除本地存储
          localStorage.removeItem("u");

        }else{

          //把对象转换成字符串
          var u =JSON.stringify(this.userInfo);
          //记录用户名和密码到本地存储
          localStorage.setItem("u",u);
        }
      },
      mounted(){
        //判断本地存储是否有值
        var n = localStorage.getItem("u");
        if(n!=null){
          //取出本地存储记录的用户名和密码
          var u = JSON.parse(n);
          //赋值给userInfo
          this.userInfo = u;
          //设置checkbox被选中
          this.ck = true;

        }

      },
    }

  }
</script>

<style  >
  html,body{
    margin: 0px;
    height: 100%;
  }

  .login-one{
         background-color:#1c77ac;
         background-image:url(../../assets/light.png);
         background-repeat:no-repeat;
         overflow:hidden;
         height: 100%;
    }
</style>
